﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SignIn.aspx.cs" Inherits="DelonixRegia.SignIn" %>


<!DOCTYPE html>
<html class="bg-black">
    <head>
        <meta charset="UTF-8">
        <title>Sign In - Delonix Regia</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

        <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="CSS/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link href="CSS/DelonixRegia.css" rel="stylesheet" type="text/css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="Scripts/bootstrap.min.js" type="text/javascript"></script>   
    </head>

    <body class="bg-black">
        <noscript>
            <meta http-equiv="refresh" content="0; url=/NoJS.aspx" />
        </noscript>
        <div class="form-box" id="loginBox" style="display: none;" runat="server">
            <div class="header" style="font-family: Agenda Italic;">Delonix Regia</div>
            <form id="signIn" runat="server">
                <div class="body bg-gray">
                    <div class="alert alert-danger" id="errorBox" style="display:none; padding:15px;">
                    </div>
                    <div class="form-group">
                        <asp:TextBox ID="tbxUsername" runat="server" CssClass="form-control" Placeholder="Username"></asp:TextBox>
                    </div>
                    <div class="form-group">
                        <asp:TextBox ID="tbxPassword" runat="server" CssClass="form-control" TextMode="Password" Placeholder="Password"></asp:TextBox>
                    </div>          
                    <div class="form-group">
                        <input type="checkbox" name="remember_me"/> Remember me
                    </div>
                </div>
                <div class="footer">
                    <asp:Button ID="btnSignIn" runat="server" Text="Sign In" CssClass="btn bg-olive btn-block" OnClick="btnSignIn_Click" />
                    
                    <p><a href="ResetPassword.aspx">I forgot my password</a></p> <!-- ADD LINK TO RESET PASSWORD -->
                </div>
            </form>
        </div>     

        <script type="text/javascript">
            $(document).ready(function () {
                if ($('#loginBox').css('display') == 'none') {
                    $('#loginBox').show('drop', { direction: 'up', easing: 'easeOutQuart', duration: 700 });
                }
                $('#tbxUsername').focus();

                $('#tbxUsername, #tbxPassword').keydown(function () {
                    $('#errorBox').hide();
                });

                $('#signIn').submit(function (e) {
                    if ($('#tbxUsername').val().length == 0) {
                        $('#errorBox').html('<strong>Error:</strong> You need to enter your username!');
                        $('#errorBox').hide().show();
                        $('#tbxUsername').focus();
                        return false;
                    } else if ($('#tbxPassword').val().length == 0) {
                        $('#errorBox').html('<strong>Error:</strong> You need to enter your password!');
                        $('#errorBox').hide().show();
                        $('#tbxPassword').focus();
                        return false;
                    }
                });
            });
        </script>
    </body>
</html>